<template>
  <el-dialog
      :title="title"
      :visible="true"
      width="1000px"
      append-to-body
      :before-close="handlerClose">
    <div>
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="类型" prop="type">
          <el-radio v-model="form.type" label="图片">图片</el-radio>
          <el-radio v-model="form.type" label="视频">视频</el-radio>
        </el-form-item>
        <el-form-item label="文件" prop="file">
          <el-upload
              class="avatar-uploader"
              action="/api//works/file/upload"
              :show-file-list="false"
              :on-success="handlerUpload">
            <el-button type="success" style="margin-top: unset;">上传文件</el-button>
          </el-upload>
          <div v-if="form.file.length === 0" style="height: 200px; border-radius: 5px; border: 1px solid #c0c0c0; margin-top: 10px; width: 400px;">
          </div>
          <div v-if="form.file.length !== 0" style="height: 200px; width: 400px;">
            <el-carousel v-if="form.type === '图片' && form.file.length !== 0" height="200px">
              <el-carousel-item v-for="item in form.file" :key="item">
                <div style="position:relative;">
                  <div style="position: absolute; top: 10px; right: 10px; z-index: 999">
                    <i style="font-size: 40px; cursor: pointer; color: #F56C6C" class="el-icon-circle-close" @click="removeImg(item)"/>
                  </div>
                  <el-image :src="item" style="height: 200px; width: 100%;"></el-image>
                </div>
              </el-carousel-item>
            </el-carousel>
            <video v-if="form.type === '视频' && form.file.length !== 0" width="360px" height="200px" controls>
              <source :src="form.file[0]" type="video/mp4">
            </video>
          </div>
        </el-form-item>
        <el-form-item label="描述" prop="textContent">
          <el-input v-model="form.textContent" type="textarea" :rows="6"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handlerClose" style="margin-top: unset;">取 消</el-button>
      <el-button type="success" @click="submitHandler" style="margin-top: unset;">提 交</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import UserWorks from "@/api/UserWorks";
  export default {
    name: "UserWordsSubmit",
    props: {
      id: {
        type: Number,
      }
    },
    watch: {
      'form.type'() {
        this.$set(this.form, 'file', []);
      }
    },
    data() {
      return {
        form: {
          type: "图片",
          file: [],
        },
        rules: {
          type: [{ required: true, message: '请填写类型', trigger: 'change' }],
          file: [{ required: true, message: '请填写文件', trigger: 'change' }],
          textContent: [{ required: true, message: '请填写描述', trigger: 'change' }],
        },
      }
    },
    computed: {
      title() {
        return "发布作品";
      }
    },
    methods: {
      removeImg(img) {
        let index = this.form.file.indexOf(img);
        this.form.file.splice(index, 1);
      },
      handlerUpload(res) {
        if (this.form.type === '视频' && this.form.file.length !== 0) {
          this.$message.warning("只能上传一个视频");
          return;
        }

        let data = res.token;
        this.form.file.push(data);
      },
      submitHandler() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.form.imageUrl = this.form.file.join(",");
            UserWorks.save(this.form).then(() => {
              this.$message.success("发布成功");
              this.handlerClose();
            });
          }
        });
      },
      init() {
        if (this.id) {
          UserWorks.getById(this.id).then(res => {
            this.form = res.data.data;
          })
        }
      },
      handlerClose() {
        this.$emit("close");
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style>
.el-dialog {
  height: unset !important;
}
.el-dialog__footer {
  width: unset !important;
  height: 100px !important;
}
</style>
